<template>
  <div class="m-content">
    <div class="block">
      <el-avatar :size="100" :src="user.avatar"></el-avatar>
      <div>
       <el-dropdown v-show="hasLogin">
            <span class="el-dropdown-link">
                  {{user.username}}<i class="el-icon-arrow-down el-icon--right" v-show="hasLogin"></i>
            </span>
          <el-dropdown-menu slot="dropdown">
              <el-dropdown-item ><el-link href="/user/info">个人信息</el-link></el-dropdown-item>
          </el-dropdown-menu>
       </el-dropdown>
      </div>
    </div>

    <div class="maction">
     <el-row>
       <el-button type="primary" plain @click="mainBlog">主页</el-button>
       <el-button type="success" plain @click="blogAdd">发表博客</el-button>
       <el-button type="info" plain @click="login" v-show="!hasLogin">登录</el-button>
       <el-button type="danger" plain @click="logout" v-show="hasLogin">退出</el-button>
       <el-button type="warning" plain @click="register" v-show="!hasLogin">注册</el-button>
     </el-row>
    </div>

  </div>
</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        user: {
          username: '请先登录',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        },
        hasLogin: false
      }
    },
    methods: {
      logout() {
        const _this = this
        _this.$axios.get("/logout", {
          headers: {
            "Authorization": localStorage.getItem("token")
          }
        }).then(res => {
          _this.$store.commit("REMOVE_INFO")
          _this.$router.push("/login")
        })
      },
      login(){
          this.$router.push("/login")
        },
      blogAdd(){
        this.$router.push("/blog/add")
      },
      mainBlog(){
        this.$router.push("/blog/main") 
      },
      register(){
        this.$router.push("/register")
      }  
    },
    created() {
      if(this.$store.getters.getUser != null && this.$store.getters.getUser.username) {
        this.user.username = this.$store.getters.getUser.username
        this.user.avatar = this.$store.getters.getUser.avatar
        this.hasLogin = true
      }

    }
  }
</script>

<style scoped>

  .m-content {
    max-width: 2000px;
    margin: 0 auto;
    text-align: center;
  }
  .maction {
    margin: 10px 0;
  }


  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

</style>